<template>
	<div style="padding:0px;">
		<el-card class="box-card">
		  <!-- <div slot="header" class="clearfix">
		    <span style="line-height: 30px;" >消息流程配置</span>
		  </div> -->
		  <div  class="text item">
			<el-form :model="dialogForm" :rules="rules" ref="dialogForm" :label-width="formLabelWidth">
			  	<el-form-item label="流程名称"  prop="workflowNodeTerm">
			      <el-input v-model="dialogForm.workflowNodeTerm" auto-complete="off" :disabled="!dialogSendData.isAdd" :maxlength='20'></el-input>
			    </el-form-item>
			    <el-form-item label="节点名称" prop="workflowNodeStatus">
			      <el-select v-model="dialogForm.workflowNodeStatus" filterable placeholder="请选择节点名称" :disabled="!dialogSendData.isAdd">
		                <el-option  label="请选择节点名称" value="" ></el-option>
		                <el-option  v-for="(item,index) in workflowStatus" :key="index" :label="item" :value="index-0" ></el-option>
		                
                   </el-select>
			    </el-form-item>
			    <el-form-item label="退回节点" >
			        <el-select v-model="dialogForm.workflowNodeReturnStatus" filterable placeholder="请选择退回节点" :disabled="!dialogSendData.isAdd">
		                <el-option  label="请选择退回节点" value="" ></el-option>
		                <el-option  v-for="(item,index) in workflowStatus" :key="index" :label="item" :value="index-0" ></el-option>
                   </el-select>
			    </el-form-item> 
			    <el-form-item label="节点角色" prop="roleNameList">
			    	<div style="display:flex;">
			    		<el-select v-model="dialogForm.roleNameList" multiple placeholder="点击选择角色按钮选择" disabled ></el-select>
                        <el-button style="margin-left:8px;" size="small" type="info" @click="selectRole()" >选择角色</el-button>
			    	</div>
			    </el-form-item>
				<el-form-item  label-width="0px" style="margin-bottom:8px;">
				    <el-button type="primary" @click="addBranchList()" size="small" >添加分支节点</el-button>
				</el-form-item>
				<div  v-for="(item,index) in dialogForm.childrenTemplateList" style="padding:5px;border:1px dashed #ccc;display:flex;">
			    	<el-form-item label="分支流程名称" label-width="110px" style="flex:1;margin-right: 0em;margin-bottom:0;" :prop="'childrenTemplateList.' + index + '.workflowNodeTerm'" :rules="{required: true, message: '请填写分支流程名称', trigger: 'blur'}">
				      <!-- <el-select v-model="item.workflowNodeStatus" filterable placeholder="请选择节点名称" :disabled="!dialogSendData.isAdd">
				      			                <el-option  label="选择分支节点名称" value="" ></el-option>
				      			                <el-option  v-for="(item1,index1) in workflowStatus" :key="index1" :label="item1" :value="index1-0" ></el-option>
				      	                   </el-select> -->
	                   <el-input v-model="item.workflowNodeTerm" auto-complete="off" :disabled="!dialogSendData.isAdd" :maxlength='20'></el-input>
				    </el-form-item>
			    	<el-form-item label="分支节点角色" label-width="110px"  style="flex:1;margin-right: 1em;margin-bottom:0;" :prop="'childrenTemplateList.' + index + '.roleNameList'" :rules="{required: true, message: '请选择分支节点角色', trigger: 'change' ,type:'array'}">
				        <el-select v-model="item.roleNameList" multiple placeholder="点击选择分支角色按钮选择" disabled></el-select>
				    </el-form-item>
				    <el-button style="margin-left:8px;" size="small" type="info" @click="selectRoleChild(index)" >选择分支角色</el-button>
				    <el-button style="margin-left:8px;" size="small" type="danger" @click="removeBranchList(index)" >删 除</el-button>
				</div>
			  </el-form>
			</div>
		</el-card>
		<div  style="text-align:right;margin-top:15px;">
			 <el-button @click="returnBack">返 回</el-button>
			 <el-button type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
		</div>
		<el-dialog :class="'dialogSelectRole'" size="tiny" title="选择角色" :visible.sync="dialogSelectRole" :modal="false">
			<el-checkbox-group v-model="roles" >
			    <el-checkbox v-for="(item,index) in roleList" :label="item" :value="item" :key="index">{{item.roleName}}</el-checkbox>
			</el-checkbox-group>
			<div  style="text-align:right;margin-top:15px;">
				<el-button @click="retrunSelectRole()">返 回</el-button>
				<el-button type="primary" @click="submitSelectRole()">确 认</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
    import agentHttp from '@/utils/agentHttp.js';
	export default{
		created(){
			this.getRoleList();
        },
		props:['dialogSendData','tableData','workflowStatus'],
		data(){
			return{
				roleNameList:[],
				childrenRoleNameList:[],
				isChild:false,
				index:0,
                roles:[],
				roleList:[],
				dialogSelectRole:false,
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		        dialogForm:{
		        	workflowNodeName:"",
		        	workflowNodeStatus:"",
		        	workflowNodeReturnStatus:"",
		        	workflowNodeReturnStatusVO:"",
					childrenTemplateList: [],
					roleList: [],
					roleNameList:[]
		        },
		        //验证规则：
		        rules: {
		          workflowNodeTerm: [
		            { required: true, message: '请填写流程名称', trigger: 'blur' }
		          ],
		          workflowNodeStatus:[
		            {required: true, message: '请选择节点名称', trigger: 'change',type:"number"}
		          ],
		          workflowNodeReturnStatus:[
		            {required: false, message: '请选择退回节点', trigger: 'change',type:"number"}
		          ],
		          roleNameList:[
		            { type: 'array', required: true, message: '请选择节点角色', trigger: 'change' }
		            
		          ]
		          
		        }
			}
		},methods:{
			getRoleList(){
				agentHttp.post('adminApi/admin/sys_role/queryAll').then((data)=>{ 
			        this.roleList = data.data;
			        if(this.dialogSendData.row==""){
			      		//新增
			      		
			      	}else{
			      		//修改回填
			      		this.selectData();
			      	}
			        this.dialogForm.workflowNodeTerm=this.dialogSendData.workflowNodeTerm;
			      	
			      	
			    })
			},
			retrunSelectRole(){

				this.dialogSelectRole=false;
				this.roles=[];
			},
			submitSelectRole(){
                if(this.roles.length>0){
					if(!this.isChild){
						this.dialogForm.roleList=[];
						this.dialogForm.roleNameList=[];
						for(let i=0;i<this.roles.length;i++){
							this.dialogForm.roleList.push({id:this.roles[i].id,roleName:this.roles[i].roleName});
						    this.dialogForm.roleNameList.push(this.roles[i].roleName);
						}
						this.roleNameList=this.roles;
						
					}else{
	                    this.dialogForm.childrenTemplateList[this.index].roleList=[];
					    this.dialogForm.childrenTemplateList[this.index].roleNameList=[];
						for(let i=0;i<this.roles.length;i++){
							this.dialogForm.childrenTemplateList[this.index].roleList.push({id:this.roles[i].id,roleName:this.roles[i].roleName});
						    this.dialogForm.childrenTemplateList[this.index].roleNameList.push(this.roles[i].roleName);
						}
						this.childrenRoleNameList[this.index]=this.roles;
					}
					
					
				}else{
					if(!this.isChild){
                        this.dialogForm.roleList=[];
                        this.dialogForm.roleNameList=[];
                        this.roleNameList=[];
					}else{
                        this.dialogForm.childrenTemplateList[this.index].roleList=[];
                        this.dialogForm.childrenTemplateList[this.index].roleNameList=[];
                        this.childrenRoleNameList=[];
					}
					
				}
				this.roles=[];
				this.dialogSelectRole=false;
			},
			addBranchList:function(index){					
				this.dialogForm.childrenTemplateList.splice(this.dialogForm.childrenTemplateList.length,0,{
					templateType:this.dialogSendData.status,
					workflowNodeName:"",
                    workflowNodeReturnStatus:"",
                    workflowNodeReturnStatusVO:"",
					workflowNodeStatus:"",
					roleNameList:[],
					roleList: []
				});
			},
			removeBranchList:function(index){	 
				this.dialogForm.childrenTemplateList.splice(index,1);
			},
			selectRole(){
				if(this.roleNameList.length>0){
					this.roles=this.roleNameList;
				}else{
					this.roles=[];
				}
				this.isChild=false;
                this.dialogSelectRole=true
			},
			selectRoleChild(index){
				if(this.childrenRoleNameList[index]&&this.childrenRoleNameList[index].length>0){
					this.roles=this.childrenRoleNameList[index];
				}else{
					this.roles=[];
				}
				this.index=index;
				this.isChild=true;
				this.dialogSelectRole=true;
			},
			returnBack(){
				this.dialogSendData.row="";
				this.dialogSendData.dialogFormVisible=false;
			},
			submitConfirmForm(formName){
                 this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	if(this.dialogSendData.row===""){
		          		//添加
		          	    this.addData();
		          	}else{
		          		//修改
		          		this.editData();
		          	}
		            
		          } else {
		          	this.$nextTick(()=>{
		          		this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText||"提交失败");
		                return false;
		          	})
		          }
		        });
			},
			addData(){
				this.dialogForm.templateType=this.dialogSendData.status;
		        agentHttp.postJson('adminApi/admin/work_flow_template/add',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"添加成功");
		            	setTimeout(()=>{
		            		this.dialogSendData.dialogFormVisible=false;
		            	},100)
		            } 
		        }) 
		    },
		    editData(){
		    	this.dialogForm.templateType=this.dialogSendData.status;
		        agentHttp.putJson('adminApi/admin/work_flow_template/update',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"修改成功");
		            	setTimeout(()=>{
		            		this.dialogSendData.row="";
		            		this.dialogSendData.dialogFormVisible=false;
		            	},100)
		            } 
		        }) 
		    },
		    selectData(){
		        this.dialogForm=this.dialogSendData.row;

		        this.dialogForm.roleNameList=[];
		        for(let i=0;i<this.dialogForm.roleList.length;i++){
		        	this.dialogForm.roleNameList.push(this.dialogForm.roleList[i].roleName);
		        	for(let k=0;k<this.roleList.length;k++){
		        		if(this.dialogForm.roleList[i].id==this.roleList[k].id){
		        			this.roleNameList.push(this.roleList[k])
		        		}
		        	}
		        }
		        if(this.dialogForm.childrenTemplateList.length>0){
		        	for(let j=0;j<this.dialogForm.childrenTemplateList.length;j++){
		        		this.dialogForm.childrenTemplateList[j].roleNameList=[];
		        		this.childrenRoleNameList[j]=[];
		        		if(this.dialogForm.childrenTemplateList[j].roleList.length>0){
		        			for(let i=0;i<this.dialogForm.childrenTemplateList[j].roleList.length;i++){
					        	this.dialogForm.childrenTemplateList[j].roleNameList.push(this.dialogForm.childrenTemplateList[j].roleList[i].roleName);
					        	for(let k=0;k<this.roleList.length;k++){
					        		if(this.dialogForm.childrenTemplateList[j].roleList[i].id==this.roleList[k].id){
					        			this.childrenRoleNameList[j].push(this.roleList[k])
					        		}
					        	}

					        }
		        		}
                        
		        	}
		        }
		    }
		}
	}
</script>
<style scoped lang="scss">
    .dialogSelectRole{background-color:rgba(0,0,0,0.3);}
    .el-checkbox{margin-left: 15px;padding:3px 0px;}
	/* .v-modal{z-index:0!important;} */
</style>